
<template>
    <div class="nav">
<!--        <van-nav-bar @click-right="onClickRight">-->
<!--            <template #left>-->
<!--                <img class="logo" src="@/assets/logo.png" @click="goRouter('/')">-->
<!--            </template>-->
<!--            <template #right>-->
<!--                <van-icon name="cross" size="23" color="#ebe6e6" />-->
<!--            </template>-->
<!--        </van-nav-bar>-->

        <van-popover v-model="showPopover" trigger="click" :actions="actions" @select="onSelect" placement="bottom-end">
            <template #reference>
                <div class="nav-list" @click="goRouter('/')">
                    <div>{{$t('shop.menu.home')}}</div>
                </div>
                <div class="nav-list" @click="goRouter('/category')">
                    <div>{{$t('shop.menu.category')}}</div>

                </div>
                <div class="nav-list" @click="goRouter('/faq')">
                    <div>{{$t('shop.menu.faq')}}</div>

                </div>
                <div class="nav-list" @click="goRouter('/me')">
                    <div>{{$t('shop.menu.me')}}</div>

                </div>
                <div class="nav-list" @click="goRouter('/srouse')">
                    <div>{{$t('m.rousev')}}</div>

                </div>

                <div class="nav-list">
                  <img src="../assets/myimages/2.png" width="13.3">
                    <div>{{ $t('m.lan') }}</div>

                </div>
            </template>
        </van-popover>


    </div>
</template>

<script>
import { Notify } from 'vant';
// import {getPrice } from '@/util/api';
import i18n from '@/i18n';


export default {
    name: 'NavBar',
    props:{
    showNav:Boolean
  },
    created() {
      console.log(this.showNav)
        //this.test()
       if(localStorage.getItem('Language')==null){
        this.lan=this.actions[0]['text']
       }else{
        this.lan=localStorage.getItem('Language')
       }


    },
    data() {
        return {
            lan:"EngLish",
            showPopover: false,
            // 通过 actions 属性来定义菜单选项
            actions: [
                { text: 'English' },
                { text: '简体中文' },
                { text: '繁體中文' },
                { text: '한국어' },
                { text: 'Tiếng Việt' },
                { text: '日本語' },
                { text: 'हिंदी' },
                { text: 'Indonesia' },
            ],
        };
    },
    methods: {

        goRouter(e){
            if(e=='d'){
                Notify({ type: 'success', message: this.$t('m.jqqd') });
            }else{
                this.$router.push(e)
              this.$emit('changeNav',!this.showNav)
            }

        },
        onClickRight(){
            this.$router.back()
        },
        onSelect(action) {

           this.lan=action.text;
           if (action.text == '简体中文') {
                i18n.locale = 'zh'

                localStorage.setItem('localeLanguage', 'zh')

            }
            if (action.text == '繁體中文') {
                i18n.locale = 'tw'

                localStorage.setItem('localeLanguage', 'tw')

            }
            if (action.text == 'English') {
                i18n.locale = 'en'
                localStorage.setItem('localeLanguage', 'en')
            }

            if (action.text == '한국어') {
                i18n.locale = 'ko'
                localStorage.setItem('localeLanguage', 'ko')
            }

            if (action.text == 'Tiếng Việt') {
                i18n.locale = 'vi'
                localStorage.setItem('localeLanguage', 'vi')
            }

            if (action.text == '日本語') {
                i18n.locale = 'jp'
                localStorage.setItem('localeLanguage', 'jp')
            }

            if (action.text == 'हिंदी') {
                i18n.locale = 'ind'
                localStorage.setItem('localeLanguage', 'ind')
            }

            if (action.text == 'Indonesia') {
                i18n.locale = 'id'
                localStorage.setItem('localeLanguage', 'id')
            }

            localStorage.setItem('Language',action.text)

            window.location.reload();

          /*  setTimeout(()=>{
                this.onClickRight();
            },1000)*/
        },


    },

}
</script>
<style scoped>

.price span{
    font-size: 22px;
    margin: 0 3px 0 3px;
}
.nav {
    width: 164px;
    flex-direction: column;
    background-color: #161616;
    justify-content: center;
    align-items: center;
    max-width: 500px;
    color: #ebe6e6;
  position: absolute;
  top:50px;
  right: 10px;
  border-radius: 0 0  0 22px;
  border:1px solid #FFFFFF;
}
.van-nav-bar{
    background-color: #161616;
}
[class*=van-hairline]::after {
    border-bottom: 0.5px solid #37383b;

}

.logo {
    width:35px;
    height: auto;
}

.nav-list {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: end;
    padding: 10px 20px;



  line-height: 20px;
  /* identical to box height, or 143% */
  text-align: right;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  box-sizing: border-box;

}
.nav-list div:first-child{

  border-bottom: 1px solid rgba(251, 132, 23, 0.5);
  padding-bottom: 5px;
  width: 100%;
  font-family: 'Dream Han Sans SC';
  font-style: normal;
  font-weight: 398;
  font-size: 14px;
}
.nav-list:last-child div {
  border-bottom: none;

}
.nav-list:last-child img{
  margin-right: 10px;
}
.lan{
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 12px;
    color: #ebe6e6;
}
</style>
